<template>
  <div class="write_container">
    <div class="recent_use">
      <div class="title">最近使用</div>
      <div class="box">
        <!-- <div class="item">
          <div class="add">
            <van-icon name="plus" size="0.8rem" />
            <div style="margin-top: 10px">日志</div>
          </div>
        </div> -->
        <div
          class="item"
          @click="itemHandle(item)"
          v-for="(item, index) in tempList"
          :key="index"
        >
          <div class="template">
            <div class="temp_title">{{ item.name }}</div>
            <div
              class="temp_li"
              v-for="(it, i) in item.fields.slice(0, 3)"
              :key="i"
            >
              <div class="li_label">{{ it.Key }}</div>
              <div class="li_text">请输入</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="other_container">
      <div class="title">其他</div>
      <div class="box">
        <div class="item" v-for="(item, index) in tempList" :key="index">
          <div class="template">
            <div class="temp_title">{{ item.name }}</div>
            <div
              class="temp_li"
              v-for="(it, i) in item.fields.slice(0, 3)"
              :key="i"
            >
              <div class="li_label">{{ it.Key }}</div>
              <div class="li_text">请输入</div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { GetTemplateListByUser } from "@/api/log";
import { Local } from "@/utils/storage";

const router = useRouter();
const itemHandle = (item) => {
  router.push({ name: "writeLog", query: { templateId: item.id } });
};
onMounted(() => {
  getList();
});
const userId = ref("");
userId.value = Local.get("userId");
const tempList = ref([]);

const getList = async () => {
  const res = await GetTemplateListByUser({ userId: userId.value });
  tempList.value = res.data;
  tempList.value.forEach((item) => {
    item.logImg = JSON.parse(item.logImg);
    item.fields = JSON.parse(item.fields);
  });
};
</script>
<style lang="scss" scoped>
.write_container {
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
  background-color: #fff;
  font-family: 黑体;
  overflow: scroll;
  .other_container {
    margin-top: 10px;
  }
  .title {
    font-size: 0.6rem;
    font-weight: 600;
    color: #6f6f6f;
  }
  .box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .item {
      width: 30%;
      box-shadow: 0 0 5px #d4d5d7;
      border-radius: 3px;
      margin: 5px;
      cursor: pointer;
      .add {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 0.5rem;
        color: #d4d5d7;
      }
      .template {
        padding: 10px;
        box-sizing: border-box;
        .temp_title {
          font-size: 0.4rem;
          font-weight: bold;
        }
        .temp_li {
          .li_label {
            color: #6f6f6f;
            font-size: 0.25rem;
            margin: 5px 0;
          }
          .li_text {
            color: #6f6f6f;
            font-size: 0.3rem;
          }
        }
      }
    }
  }
}
</style>
